<template>
  <div class="loginPage">
    <div class="loginWrap">
      <div class="loginZoom"
           v-if=show>
        <p class="loginTitle">中国国机集团云党建</p>
        <div class="loginArea">
          <div class="loginInput">
            <input type="digit"
                   placeholder="输入手机号"
                   id="telPhoneCheck"
                   @blur="checkTel"
                   v-model="text"
                   @focus="focus">
            <p class="errorTips"
               :class="{'shake animated':telError }"
               v-show=telError>手机格式错误</p>
          </div>
          <div class="loginBtn">
            <input type="button"
                   value="下一步"
                   id="loginBtn"
                   @click.stop="nextStep">
          </div>
          <div class="loginTips">
            <p>未注册的用户将自动注册</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      show: true,
      text: '',
      telError: false,
      inputType: 'password',
      password: '',
      showPassword: false,
      passwordError: false,
      info: './../../static/images/info.jpg',
      showModel: true,
      message: 0
    }
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    nextStep () {
      let that = this
      if (!this.checktel(this.text)) {
        this.telError = true
      } else {
        console.log(wx.getStorageSync('openId'))
        this.$http.post('https://dati.co-links.com/user/phone_code/', {
          openid: wx.getStorageSync('openId'),
          phone: that.text
        }).then(function (res) {
          that.setUserInfo({
            phone: that.text
          })
          if (res.data.code === 'u004') {
            that.message = res.data.data
          }
        })
        wx.navigateTo({
          url: '../validate/main?tel=' + this.text + '&message=' + that.message
        })
      }
    },
    checktel (str) {
      var reg2 = /^(((13|14|15|18|17)\d{9}))$/
      if (!reg2.test(str)) {
        return false
      }
      return true
    },
    checkTel () {
      if (!this.checktel(this.text)) {
        this.telError = true
      }
    },
    focus () {
      this.telError = false
    },
    focusPass () {
      this.passwordError = true
    },
    checkPass () {

    }

  },
  mounted () {

  }
}
</script>
<style>
page {
  width: 100%;
  height: 100%;
}
.model {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
  z-index: 50;
}
.loginPage {
  width: 100%;
  height: 100%;
}
.loginWrap {
  width: 100%;
  height: 100%;
  /* background-image: url("../images/login.jpg"); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.loginWrap .loginZoom,
.loginWrap .fillPassword {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.loginTitle {
  font-size: 0.38rem;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 1.4rem 0;
  background: #00cc75;
  position: relative;
}
.loginTitle:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
}
.loginArea {
  margin: 0 0.76rem;
}
.loginInput {
  position: relative;
  height: 0.8rem;
}
#androidDialog1 {
  display: none;
}
.loginArea {
  margin-top: 0.65rem;
}
.loginArea input {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.3rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  font-size: 0.34rem;
  border: none;
  outline: none;
}
.loginInput input {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 5px #ccc;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
  font-size: 0.3rem;
}
.loginInput .errorTips {
  position: absolute;
  right: 0.6rem;
  top: 0;
  height: 100%;
  padding-right: 0.6rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/errorTips.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.3rem 0.3rem;
  font-size: 0.24rem;
  color: #e83328;
  line-height: 0.8rem;
  z-index: 999;
  /* display: none; */
}
.loginInput .eyes {
  position: absolute;
  right: 0.3rem;
  top: 0;
  height: 100%;
  width: 0.68rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/eyes2.png');
  background-size: 0.38rem 0.24rem;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
  /* display: none; */
}
.loginBtn {
  width: 100%;
  height: 0.8rem;
  margin-top: 0.3rem;
}
.loginBtn input {
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.34rem;
  color: #ffffff;
  background: linear-gradient(to right, #04c373 0%, #00e999 100%);
  box-shadow: 0 3px 5px #ccc;
}

.loginTips {
  text-align: center;
  font-size: 0.24rem;
  color: #000;
  margin-top: 0.2rem;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.code {
  text-align: center;
  font-size: 0.24rem;
  color: white;
  padding-top: 0.13rem;
}
.sendCode {
  font-weight: normal;
}
.loginArea .codeArea {
  text-align: center;
}
.loginArea .codeArea input {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.13rem;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0 0.1rem;
}
.codeerrorTips {
  text-align: center;
  padding-top: 0.2rem;
  display: none;
}
.codeerrorTips span {
  display: inline-block;
  position: relative;
  font-size: 0.24rem;
  color: white;
  padding-left: 0.5rem;
}
.codeerrorTips span:before {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  margin-top: -0.15rem;
  width: 0.3rem;
  height: 0.3rem;
  background-image: url('https://xcx.taosha.co/Uploads/images/errorTips.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.3rem 0.3rem;
}
.codeerrorTips span.noTips:before {
  width: 0;
}
.setPassword {
  display: none;
}
.fillPassword {
  /* display: none; */
}
.forgetPassword {
  font-size: 0.24rem;
  color: white;
  text-align: center;
  padding-top: 0.2rem;
}
.forgetPassword a {
  color: #000;
}
button[disabled] {
  color: white;
}
button[disabled]:not([type]) {
  color: rgba(255, 255, 255, 0.7);
  background-color: #48c4a0;
}
</style>
